<template>
  <el-container class="hy-container">
    <el-main class="goods-main">
      <div class="backGoodList" @click="back()">返回产品列表</div>
      <div class="detail">
        <div class="detail-main" v-loading="detailLoading">
          <div class="extra-header">
            <h1>产品详情</h1>
            <el-button class="join" type="primary" disabled>加入购物车</el-button>
          </div>
          <div>
            <div class="title">基本信息</div>
            <div class="box">
              <div class="leftBox">
                <el-image class="imageLimit" :src="url">
                  <div slot="error">
                    <div class="image-slot">
                      <img style="width:152px" src="../../assets/images/noImg.png" />
                    </div>
                  </div>
                </el-image>
                <el-tag type="primary" style="width: 200px;">提示：目前只支持单个图片</el-tag>
              </div>
              <div class="columnTable">
                <div class="mailTable" style="margin-left: 15px;width:420px">
                  <div class="mailCell" v-for="(item,index) in tableData" :key="index">
                    <div class="header">{{item.key}}</div>
                    <div class="sizeContent" v-if="item.key=='产品尺寸'">
                      <div>
                        <span>长：</span>
                        <span>{{item.value["length"]}}</span>
                      </div>
                      <div>
                        <span>宽：</span>
                        <span>{{item.value["width"]}}</span>
                      </div>
                      <div>
                        <span>高：</span>
                        <span>{{item.value["height"]}}</span>
                      </div>
                      <div style="padding-right:7px">CM</div>
                    </div>
                    <div class="content" v-if="item.key!='产品尺寸'">{{item.value}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="section">
              <div class="sectionTitle">供应商</div>
              <el-table :data="supplierData" style="width: 100%" border>
                <el-table-column prop="supplierName" label="供应商名称"></el-table-column>
                <el-table-column prop="productName" label="供应商产品名称"></el-table-column>
                <el-table-column prop="productCode" label="供应商产品编号"></el-table-column>
                <el-table-column prop="unit" label="单位"></el-table-column>
                <el-table-column prop="minOrder" label="最小起订量"></el-table-column>
                <el-table-column prop="remark" label="备注"></el-table-column>
              </el-table>
            </div>

            <div class="section">
              <div class="sectionTitle">包装说明</div>
              <div class="mailTable">
                <div class="mailCell">
                  <div class="header">是否拆装</div>
                  <div class="content">
                    <el-radio-group v-model="product.assemble" disabled>
                      <el-radio :label="true">是</el-radio>
                      <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                  </div>
                </div>
                <div class="mailBox">
                  <div class="mailArea" style="align-items: center">
                    <div class="headerBox">外盒</div>
                    <div class="mailFlex">
                      <div class="mailArea">
                        <div class="fb">长*高*宽</div>
                        <div class="sizeContent special">
                          <div>
                            <span>长：</span>
                            <span>{{outBox["length"]}}</span>
                          </div>
                          <div>
                            <span>宽：</span>
                            <span>{{outBox.width}}</span>
                          </div>
                          <div>
                            <span>高：</span>
                            <span>{{outBox.height}}</span>
                          </div>
                          <div style="padding-right:7px">CM</div>
                        </div>
                        <div class="a">
                          <div class="first">体积</div>
                          <div class="unit">{{outBox.volume}}CBM</div>
                        </div>
                        <div class="a">
                          <div class="first">重量</div>
                          <div class="unit">{{outBox.weight}}KG</div>
                        </div>
                        <div class="a">
                          <div class="first">装数</div>
                          <div class="unit">{{outBox.quantity}}</div>
                        </div>
                      </div>
                      <div class="mailArea">
                        <div class="fb">中文说明</div>
                        <div class="normal">{{outBox.description}}</div>
                      </div>
                      <div class="mailArea">
                        <div class="fb">英文说明</div>
                        <div class="normal">{{outBox.descriptionEn}}</div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mailBox" style="border-top: 1px solid #ebeef5;">
                  <div class="mailArea" style="align-items: center">
                    <div class="headerBox">内盒</div>
                    <div class="mailFlex">
                      <div class="mailArea">
                        <div class="fb">长*高*宽</div>
                        <div class="sizeContent special">
                          <div>
                            <span>长：</span>
                            <span>{{inBox["length"]}}</span>
                          </div>
                          <div>
                            <span>宽：</span>
                            <span>{{inBox.width}}</span>
                          </div>
                          <div>
                            <span>高：</span>
                            <span>{{inBox.height}}</span>
                          </div>
                          <div style="padding-right:7px">CM</div>
                        </div>
                        <div class="a">
                          <div class="first">体积</div>
                          <div class="unit">{{inBox.volume}}CBM</div>
                        </div>
                        <div class="a">
                          <div class="first">重量</div>
                          <div class="unit">{{inBox.weight}}KG</div>
                        </div>
                        <div class="a">
                          <div class="first">装数</div>
                          <div class="unit">{{inBox.quantity}}</div>
                        </div>
                      </div>
                      <div class="mailArea">
                        <div class="fb">中文说明</div>
                        <div class="normal">{{inBox.description}}</div>
                      </div>
                      <div class="mailArea">
                        <div class="fb">英文说明</div>
                        <div class="normal">{{inBox.descriptionEn}}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="section">
              <div class="sectionTitle">标签</div>
              <div style="text-align:left">
                <el-tag
                  style="margin-right:15px;"
                  :type="item.color"
                  v-for="(item,index) in tagList"
                  :key="index"
                >{{item.name}}</el-tag>
              </div>
            </div>

            <div class="section">
              <div class="sectionTitle">报关&财务品名</div>
              <div class="mailTable">
                <div class="mailCell">
                  <div class="header">HS编号</div>
                  <div class="content"></div>
                </div>
                <div class="mailCell">
                  <div class="header">报关品名</div>
                  <div class="content"></div>
                </div>
                <div class="mailCell">
                  <div class="header">财务科目</div>
                  <div class="content"></div>
                </div>
              </div>
            </div>

            <div class="section">
              <div class="sectionTitle">吊牌编号</div>
              <div class="bigBox">
                <div class="smallBox">
                  <div class="mailTable">
                    <div class="mailCell">
                      <div class="header">默认吊牌编号</div>
                      <div class="content"></div>
                    </div>
                    <div class="mailCell">
                      <div class="header">历史编号</div>
                      <div class="content"></div>
                    </div>
                  </div>
                </div>
                <div class="smallBox">
                  <div class="mailTable">
                    <div class="mailCell">
                      <div class="header">供应商</div>
                      <div class="content"></div>
                    </div>
                    <div class="mailCell">
                      <div class="header">供应商</div>
                      <div class="content"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="section">
              <div class="sectionTitle">团队共享</div>
            </div>

            <div class="section">
              <div class="sectionTitle">文件</div>
            </div>

            <div class="section">
              <div class="sectionTitle">操作记录</div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import store from "@/utils/factory";
import { getProductDetail } from "@/api/product";
export default {
  computed: {},
  name: "detail",
  data() {
    return {
      detailLoading: false,
      url: "",
      detailData: {},
      radio: false,
      tableData: [],
      supplierData: [],
      tagList: [],
      product: {},
      inBox: {},
      outBox: {}
    };
  },
  created() {
    window.scroll(0, 0);
    this.goDetail();
  },
  mounted() {},
  methods: {
    statusToChinaName(status) {
      if (!status) {
        return "";
      }
      if (status == 1) {
        return "在售中";
      }
      if (status == 2) {
        return "研发中";
      }
      if (status == 3) {
        return "已停售";
      }
    },
    sourceToChinaName(source) {
      if (!source) {
        return "";
      }
      if (source == 1) {
        return "自行研发";
      }
      if (source == 2) {
        return "客户提供样品";
      }
      if (source == 3) {
        return "工厂提供样品";
      }
    },
    back() {
      this.$router.back(-1);
    },
    transForColor(index) {
      if (index == 0) {
        return "primary";
      }
      if (index == 1) {
        return "success";
      }

      if (index == 2) {
        return "info";
      }
      if (index == 3) {
        return "danger";
      }
      if (index == 4) {
        return "warning";
      }

      if (index > 5) {
        return "primary";
      }
    },
    goDetail() {
      let id = "";
      let code = "";
      let self = this;
      if (this.$route.query) {
        id = this.$route.query.id;
        code = this.$route.query.code;
      }
      if (!id) {
        this.$alert("未获取产品相关信息", "提示", {
          confirmButtonText: "确定",
          type: "error"
        });
        return false;
      }
      if (!code) {
        this.$alert("未获取产品相关信息", "提示", {
          confirmButtonText: "确定",
          type: "error"
        });
        return false;
      }
      this.detailLoading = true;
      getProductDetail({ id: id, code: code })
        .then(res => {
          this.detailLoading = false;
          this.url = res.data.pictures[0];
          // this.detailData = res.data;
          self.tableData = [
            { key: "产品状态", value: self.statusToChinaName(res.data.status) },
            { key: "产品性质", value: res.data.sale ? "销售品" : "非销售品" },
            { key: "产品来源", value: self.sourceToChinaName(res.data.source) },
            { key: "类目", value: res.data.category },
            { key: "产品名称", value: res.data.name },
            { key: "英文品名", value: res.data.nameEn },
            { key: "售卖名", value: res.data.nameSale },
            { key: "材质", value: res.data.material },
            { key: "型号", value: res.data.model },
            { key: "规格", value: res.data.standard },
            {
              key: "产品尺寸",
              value: {
                length: res.data["length"],
                width: res.data.width,
                height: res.data.height
              }
            },
            { key: "重量", value: res.data.weight },
            { key: "最小起订量", value: res.data.minOrder },
            { key: "颜色", value: res.data.color },
            { key: "固定单价", value: res.data.fixedPrice },
            { key: "单位", value: res.data.unit }
          ];
          self.supplierData = res.data.supplier;
          res.data.tags.map((item, index) => {
            self.tagList.push({
              name: item,
              color: self.transForColor(index)
            });
          });
          self.product = {
            assemble: res.data.assemble
          };

          self.outBox = res.data.outBox;
          self.inBox = res.data.inBox;
        })
        .catch(err => {
          this.detailLoading = false;
        });
    }
  }
};
</script>

<style rel="stylesheet/less" lang="less" scoped>
.backGoodList {
  width: 908px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  color: #aaafaf;
  background: #f3f3f3;
  text-align: left;
  padding-left: 30px;
  border: 1px solid #dfdfdf;
  border-bottom: none;
  &:hover {
    transition: all 0.6s;
    color: #606266;
    cursor: pointer;
  }
}
.detail {
  margin: 0 auto;
  width: 960px;
  border: 1px solid #dfdfdf;
}

.box {
  display: flex;
  margin-top: 20px;
}

.imageLimit {
  width: 450px;
  height: 600px;
  border-radius: 6px;
}

.detail-main {
  position: relative;
  padding: 28px 40px;
  background: #ffffff;
  .join {
    position: absolute;
    top: 30px;
    right: 40px;
    &:hover {
      opacity: 0.8;
    }
  }
  .extra-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h1 {
      font-weight: normal;
      font-size: 28px;
      margin: 0;
    }
  }
  .title {
    margin-top: 40px;
    font-weight: bold;
    text-align: left;
  }
}

.mailTable {
  // margin-left: 15px;
  border: 1px solid #ebeef5;
  font-size: 14px;
  color: #222222;
  display: table;
  width: 100%;
  text-align: center;
  // border-radius: 6px;
}

.mailArea {
  display: flex;
}

.mailCell {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  &:last-of-type {
    border-bottom: none;
  }
}

.fb {
  background: #fbfbfb;
  height: 100%;
  display: flex;
  align-items: center;
  width: 80px;
  justify-content: center;
  border-right: 1px solid #ebeef5;
}

.mailBox {
  display: flex;
  flex-direction: column;
  height: 120px;
  width: 100%;
  .mailFlex {
    display: flex;
    flex-direction: column;
    height: 120px;
    width: 100%;
    .mailArea {
      flex: 1;
      display: flex;
      align-items: center;
      .normal {
        padding: 0 12px;
      }
    }
    .mailArea:not(:last-of-type) {
      border-bottom: 1px solid #ebeef5;
    }

    .unit {
      margin-left: 10px;
      color: rgba(0, 0, 0, 0.5);
    }

    .special {
      flex: 2;
      width: 308px;
      background: #f9fbfb;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid#ebeef5;
    }

    .a {
      flex: 1;
      display: flex;
      align-items: center;
      background: #f9fbfb;
      border-right: 1px solid#ebeef5;
      &:last-of-type {
        border-right: 0;
      }
      .first {
        padding: 0 10px;
        border-right: 1px solid#ebeef5;
        height: 40px;
        line-height: 40px;
      }
    }
  }
  // border-bottom: 1px solid #ebeef5;
}

.image-slot {
  background: #f2f6fc;
  height: 600px;
  line-height: 600px;
  text-align: center;
  border: 1px solid #ebeef5;
  img {
    vertical-align: middle;
  }
}

.bigBox {
  display: flex;
  .smallBox {
    flex: 1;
  }
}

.headerBox {
  height: 120px;
  width: 50px;
  line-height: 120px;
  border-right: 1px solid #ebeef5;
  background: #fbfbfb;
}

.leftBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #fbfbfb;
  border-right: 1px solid #ebeef5;
}

.content {
  padding: 0 15px;
}

.sizeContent {
  display: flex;
  width: 320px;
  padding: 0;
  color: rgba(0, 0, 0, 0.5);
  div:not(:last-of-type) {
    flex: 1;
    text-align: left;
    padding-left: 7px;
  }
}

.section {
  margin-top: 40px;
  .sectionTitle {
    font-size: 20px;
    text-align: left;
    margin-bottom: 20px;
    font-weight: bold;
  }
}
</style>